<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人员列表</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../assets/icons/iconfont.css">
    <link rel="stylesheet" href="../css/common/index.css">
</head>
<body class="iframe">
<div class="common-query">
    <div class="query-title">常用查询</div>
    <form action="" class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone" lay-verify="required|phone" autocomplete="off"
                           class="layui-input" placeholder="请输入名称">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="" lay-search lay-verify="required">
                        <option value="">全部</option>
                        <option value="1">已反馈</option>
                        <option value="2">未审核</option>
                        <option value="2">驳回</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">单位</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone" lay-verify="required|phone" autocomplete="off"
                           class="layui-input">
                    <div class="x-input-bottom layui-icon layui-icon-search" onclick="_fn.searchInput('unit')"></div>
                </div>
            </div>

            <div class="layui-inline">
                <button class="layui-btn layui-btn-normal"><i class="iconfont icon-search"></i>查询</button>
                <button class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-delete"></i>清空</button>
            </div>
        </div>
    </form>
</div>
<div class="common-query">
    <div class="query-title">数据列表
        <span class="advance-search">
                <button class="layui-btn layui-btn-normal special-buttom" onclick="_fn.add()">新建任务</button>
            </span>
    </div>
    <div class="x-table-box">
        <table id="myTable" lay-filter="myTable"></table>
    </div>
</div>

<script type="text/html" id="operateCol">
    <a class="x-operate-btn" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>编辑</a>
    <a class="x-operate-btn" lay-event="del">
        <i class="layui-icon">&#xe640;</i>删除</a>
</script>
<script type="text/html" id="approvalStatus">
    {{#
    var statusMap={
    1: {class: "tip-bg-00c964", text: "已反馈"},
    2: {class: "tip-bg-4db8ff", text: "未审核" },
    3: {class: "tip-bg-ff6565", text: "驳回" }
    }
    }}
    <span class="tip status {{=statusMap[d.status].class}}">{{=statusMap[d.status].text}}</span>

</script>
<script src="../../lib/layui/layui.all.js"></script>
<script src="../../lib/jquery-1.9.1.min.js"></script>
<script>
    // 表头配置
    var tableHead = [
        {type: 'checkbox'},
        {field: 'xh', width: 50, title: '序号', align: 'center'},
        {field: 'name', title: '名称', align: 'center'},
        {field: 'cjdw', title: '创建单位', align: 'center'},
        {field: 'rs', title: '人数', align: 'center'},
        {field: 'cjsj', width: 220, title: '创建时间', align: 'center', sort: true},
        {field: 'cjr', width: 120, title: '创建人', align: 'center'},
        {field: 'spr', width: 120, title: '审批人', align: 'center'},
        {field: 'jcsy', width: 120, title: '检查事由', align: 'center'},
        {field: 'status', width: 120, title: '审批状态', align: 'center', templet: '#approvalStatus', unresize: true},
        {field: 'operate', width: 200, title: '操作', align: 'center', toolbar: '#operateCol'},
    ]
    // 表格数据模拟
    var data = [
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 2
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 3
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 2
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 2
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 3
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
        {
            uId: '1',
            xh: '1',
            name: '临时任务',
            cjdw: '创建单位地址',
            rs: '9527',
            cjsj: '2018/7/12 17:05',
            cjr: '张三',
            spr: '张军官',
            jcsy: '入伍的军官、文职干部',
            status: 1
        },
    ]
    // ========================================================
    var table = layui.table
        , layer = layui.layer
        , currentTable = null

    //表头设置
    var _fn = {
        // 初始化
        init: function () {
            this.loadTable(data)
            // 监控复选操作
            table.on('checkbox(myTable)', function (obj) {
                _fn.checkboxChange(obj)
            })
            // 编辑&删除
            table.on('tool(myTable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if (layEvent === 'del') { //删除
                    _fn.remove(obj)
                } else if (layEvent === 'edit') { //编辑
                    //do something
                    _fn.edit(obj)
                }
            });
        },
        /**
         * 加载表格
         * @param {array} data 表格数据
         */
        loadTable: function (data) {
            if (data) {
                currentTable = table.render({
                    elem: '#myTable'
                    , limit: 10
                    , height: '500px'
                    // ,url: '/demo/table/user/' // 异步操作数据接口
                    , page: { //开启分页
                        theme: 'table',
                        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
                        prev: '上一页',
                        next: '下一页'
                    }
                    , cols: [tableHead]
                    , data: data
                });
            }
        },
        /**
         * 表格数据重载
         */
        reloadTable: function (opt) {
            currentTable.reload(opt)
        },
        /**
         * 复选框变动执行
         */
        checkboxChange: function (obj) {
            console.log('当前选择操作！', obj)
            layer.msg('当前选择操作》》》' + obj.data.name)
        },
        /**
         * 输入框搜索
         */
        searchInput: function (type) {
            layer.msg('搜索:' + type)
        },
        /**
         * 新建
         */
        add: function () {
            layer.msg('新建任务')
            // this.editBox({title: '新增'})
        },
        /**
         * 编辑
         */
        edit: function (obj) {
            layer.msg('编辑: ' + obj.data.name)
        },
        /**
         * 删除
         */
        remove: function (obj) {
            layer.confirm('真的删除这行么', function (index) {
                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                layer.close(index);
                // todo:向服务端发送删除指令
            });
        }
    }

    // 加载初始化
    _fn.init()

</script>
</body>
</html>